<template>
  <el-container class="h-full p-0">
    <el-aside width="320px" class="flex-col shadow">
      <ToolBar class="flex-none"></ToolBar>
      <div class="p-12px">
        <el-button type="primary" class="w-130px h-44px mb-20px" @click="handleNewChat">
          <el-icon size="32px"><ChatSquare /></el-icon>
          <span class="ml-8px text-16px"> 开启新对话 </span>
        </el-button>
        <el-scrollbar class="flex-1 px-12px">
          <el-timeline class="w-full pl-0">
            <el-timeline-item
              v-for="(activity, index) in localChatStore.chatList"
              :key="index"
              :timestamp="dayjs(activity.createTime).format('YYYY-MM-DD HH:mm:ss')"
            >
              <div class="flex-b-c">
                <div class="flex-auto">
                  {{ activity?.content?.[0]?.question ? activity.content[0].question : '新对话' }}
                </div>
                <el-dropdown
                  class="flex-none"
                  @command="(cmd: string) => handleCommand(cmd, activity)"
                >
                  <div class="cursor-pointer">
                    <el-icon>
                      <MoreFilled />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu slot="popper">
                      <el-dropdown-item command="del">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-main class="wh-full-hidden flex-c-c">
      <ChatBox></ChatBox>
    </el-main>
    <el-aside width="200px">Aside</el-aside>
  </el-container>
</template>
<script lang="ts" setup>
import { dayjs } from 'element-plus'
import { useLocalChatStore, type ChatList } from '@/stores/local'
import ToolBar from './components/tool-bar.vue'
import { ChatSquare, MoreFilled } from '@element-plus/icons-vue'
defineOptions({ name: 'PageDirect' })

const localChatStore = useLocalChatStore()
// 新建对话
const handleNewChat = () => {
  if (!localChatStore.currentModel) {
    ElMessage.warning('请先选择模型')
    return
  }
  localChatStore.newChat(localChatStore.currentModel)
}
const handleCommand = (cmd: string, item: ChatList) => {
  if (cmd === 'del') {
    localChatStore.deleteChat(item.id)
  }
}
</script>
<style lang="scss"></style>
